.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:global(.electron:hover) {
  filter: drop-shadow(0 0 2em #9feaf9);
}

.logo:global(.vite:hover) {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo:global(.vue:hover) {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.countBtn {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: var(--element-bg-color);
  cursor: pointer;
  transition: border-color 0.25s;
}

.countBtn:hover {
  border-color: #646cff;
}

.countBtn:focus,
.countBtn:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.link {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}

.link:hover {
  color: #535bf2;
}

.code {
  background-color: var(--element-bg-color);
  padding: 2px 4px;
  margin: 0 4px;
  border-radius: 4px;
}

.readTheDocs {
  color: #888;
}

.staticFiles {
  display: flex;
  justify-content: center;
  align-items: center;
}

.staticLogo {
  width: 2.4em;
  margin-left: 0.4em;
}
